<template lang="pug">
  .page.swiper-frame(v-show="isShow && imgList.length > 0")
    .wrap
      CtrlBar(@closeBar='closeSwiper')
      van-swipe.app-swiper(:autoplay="5000")
        van-swipe-item(v-for="(item, index) in imgList", :key="item", :style="styleHeight")
          img(:src="item" @click="preview($event)")
    ImgPreview(:url.sync="imgPreUrl" v-if="imgPreUrl", ref="imgPreview")

</template>

<script>

import ImgPreview from '@/components/ImgPreview'
import CtrlBar from '@/components/CtrlBar'
export default {
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      imgPreUrl: '',
      isShow: false,
      imgList: [],
      model: 1
    }
  },
  created() {
    this.styleHeight = {
      height: document.documentElement.clientHeight + 'px'
    }
  },
  mounted() {
    this.$vgo.on('iframe:swiper', (obj) => {
      this.show()
      this.imgList = obj.data
      this.model = obj.modal
      this.$bar.finish()
    })
  },
  methods: {
    preview(e) {
      setTimeout(() => {
        this.$refs.imgPreview.alignCenter()
      }, 100)
      this.imgPreUrl = e.target.src
    },
    show() {
      this.isShow = true
    },
    closeSwiper() {
      this.isShow = false
      this.imgPreUrl = ''
    },
    closePreview() {
      this.imgPreUrl = ''
    }
  },
  components: {
    CtrlBar,
    ImgPreview
  }
}
</script>

<style lang="stylus">
</style>
